<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from "element-plus";

onMounted(()=>{
  getComputerUsage()
})

const tableData = ref([])
//查询使用中的电脑信息
import {getUsingComputer, forceCloseComputer, sendMessageToUser} from '@/api/computer'
import {ElNotification} from "element-plus";
const getComputerUsage = async () => {
  let result = await getUsingComputer()
  tableData.value = result.date
}
getComputerUsage()

//强制下机
const closeUserComputer = async (row) => {
  let result = await forceCloseComputer(row)
  if (result.code == 200) {
    getComputerUsage()
    ElNotification.success("强制下机成功")
  }else {
    ElNotification.error("强制下机失败")
  }
}
const refreshGetComputerUsage = ()=>{
  getComputerUsage()
  ElMessage.success("刷新成功")
}

//提醒用户部分
const textareaMessage = ref('')
const message = '您在线时长已很久，请注意休息和余额。'
const sendNotification = async ()=> {
  try {
    console.log(textareaMessage)
    console.log(message)
    let result = await sendMessageToUser(textareaMessage.value == ''?message:textareaMessage.value)
    console.log('发送信息响应结果',result)
  } catch (error) {
    console.log('发送信息错误',error)
  }
}
import { ElMessageBox } from 'element-plus'
import {Bell, Lock, Notification, Refresh} from "@element-plus/icons-vue";

const dialogVisible = ref(false)

const notifyButton = ()=>{
  dialogVisible.value = true
}
const sendNotifyButton = ()=>{
  dialogVisible.value = false
  sendNotification()
  textareaMessage.value = ''
}

</script>

<template>
  <el-button size="mini" @click="refreshGetComputerUsage"><el-icon><Refresh/></el-icon>刷新</el-button>
  <el-button size="mini" @click="notifyButton" type="success" plain>
    <el-icon><Bell/></el-icon>提醒所有用户</el-button>
  <el-table :data="tableData" height="250" style="width: 100%">
    <el-table-column prop="detail" label="电脑机型" width="180" />
    <el-table-column prop="starttime" label="开始时间" width="180" />
    <el-table-column prop="username" label="使用者" width="180" />
    <el-table-column prop="state" label="使用状态" width="180"/>
    <el-table-column prop="balance" label="用户余额/元" width="180"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="mini"
          @click="notifyButton" type="success"><el-icon><Notification/></el-icon>提醒用户</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="closeUserComputer(scope.row)"><el-icon><Lock/></el-icon>强制下机</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="500"
  >
    <el-input
        v-model="textareaMessage"
        style="width: 240px"
        :rows="2"
        type="textarea"
        placeholder="默认信息可直接发送：您在线时长已很久，请注意休息和余额。"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="sendNotifyButton">发送</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>